08. Initializing the App's Data

We have previously determined that we need to get the users and tweets data from our database and send that data to our store, along with the authedUser data, when the home page loads.

We have also created a thunk action creator that gets the data from the database and then dispatches actions to the store to set the three pieces of state we have in our store:

• users
• tweets
• authedUser

Here's what the handleInitialData() thunk action creator looks like:

``` js
function handleInitialData () {
return (dispatch) => {
return getInitialData()
.then(({ users, tweets }) => {
dispatch(receiveUsers(users));
dispatch(receiveTweets(tweets));
dispatch(setAuthedUser(AUTHED_ID));
});
};
}

```
Now, the question is where do we dispatch this action creator?

When we walked through the architecture of our app, we saw that the App Component will contain every other component. If we load the initial data (by dispatching the handleInitialData() action creator) from the App component, then no matter which route our users goes to, they’ll see all of the correct data.

Here's the commit with the changes made in this video.

Using the connect() function upgrades a component to a container. Containers can read state from the store and dispatch actions. Read more about our ability to customize our container’s relationship with the store in the react-redux API documentation. Make sure to go through the excellent examples that are provided in the linked documentation to gain a deeper understanding of Redux.